<template>
  <div class="search_bill">
    <header-go-back title="搜索账单" text="取消" @back="handleGoBack"></header-go-back>
    <div class="search_input">
      <input type="text" placeholder="搜索账单" v-model="searchValue" pattern="[A-Za-z]{3}">
      <div class="search_input_button" @click="handleShowScreen">筛选</div>
    </div>
    <div class="quick_search">
      <div v-if="searchValue" class="quick_search_item">
        <i class="iconfont icon-sousuo"></i>
        <div>{{ '搜索"'+searchValue+'"' }}</div>
      </div>
    </div>
    <van-popup v-model:show="showScreenVisible" position="right" :style="{ 'height': '100%' }">
      <div class="screen_sheet">
        <div class="screen_sheet_item">
          <div class="item_title">账单日期</div>
        </div>
        <div class="screen_sheet_item">
          <div class="item_title">账单金额</div>
        </div>
        <div class="screen_sheet_item">
          <div class="item_title">账单备注</div>
        </div>
        <div class="screen_sheet_item">
          <div class="item_title">账本</div>
        </div>
        <div class="screen_sheet_item">
          <div class="item_title">分类</div>
        </div>
        <div class="screen_sheet_item">
          <div class="item_title">成员</div>
        </div>
        <div class="screen_sheet_button">
          <button>重置</button>
          <button>确认</button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import HeaderGoBack from '@/components/common/HeaderGoBack.vue'
import { useRouter } from 'vue-router'
export default defineComponent({
  components: {
    HeaderGoBack
  },
  setup() {
    const router = useRouter()
    const showScreenVisible = ref(false)
    const searchValue = ref('')
    // 打开筛选弹窗
    const handleShowScreen = () => {
      console.log('筛选');
      showScreenVisible.value = true
    }
    // 跳转到首页
    const handleGoBack = () => {
      router.push('/')
    }
    return {
      showScreenVisible,
      searchValue,
      handleShowScreen,
      handleGoBack
    }
  }
})
</script>

<style scoped>
  .search_input {
    display: flex;
    justify-content: space-between;
    padding: 20px;
  }
  .search_input input {
    border: none;
  }
  .quick_search {
    text-align: left;
    padding: 0 20px;
    font-size: 18px;
    background-color: #f9c3c233;
  }
  .quick_search_item {
    display: flex;
    align-items: center;
    height: 50px;
  }
  .quick_search_item i {
    margin-right: 16px;
  }
</style>